<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/jquery.js"></script>
    <script src="js/EventUtil.js"></script>
    <title>uploadFile</title>
    <style>
        #test_box{width:300px;height:auto; margin:150px auto;}
        #a1{width:100px;height:100px;background: #aaaaaa;text-align:center;line-height:100px;color:rgba(81, 49, 202, 0.72);margin:0px auto;
       }
       #out-input{text-align: center;}
    </style>
</head>
<body>
    <div id="test_box">
        <div id="a1">拖拽到此</div>
        <div id="out-input"></div>
    </div>
<script>
    var a1=document.getElementById("a1");
    function handleEvent(event){
        var info ="",
                output= document.getElementById("out-input"),
                files,i,len;
               
        EventUtil.preventDefault(event); //阻止事件的默认行为
        var formData =new FormData();
        if(event.type == "drop"){
            files=event.dataTransfer.files;
            i = 0;
            len= files.length;

            while( i< len){
                info += files[i].name +"("+ files[i].type + "," +files[i].size +"bytes)<br/>";
                formData.append("file"+i,files[i]);
                i++;
            }
            output.innerHTML = info;
            $.ajax({
                type:"post",
                url:"/uploadFile",
                data:formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,  //此处指定对上传数据不做默认的读取字符串的操作
                success:function(rs){
                    console.log(rs);
                },
                error:function(r){
                    alert("文件上传出错！");
                }
            });
        }
    }
    EventUtil.addHandler(a1, "dragenter", handleEvent);
    EventUtil.addHandler(a1, "dragover", handleEvent);
    EventUtil.addHandler(a1, "drop", handleEvent);
</script>
</body>
</html>